<template>
	<view class="container">
		
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[tabCur==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<tui-icon :name="tabCur==index?item.icon+'-fill':item.icon" :color="tabCur==index?'#E41F19':'#666'" :size="item.size"></tui-icon>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
		
		<tui-sticky :scrollTop="scrollTop" stickyHeight="104rpx">
			<template v-slot:header>
				<view class="sticky-item">
					<view class="date">钱包余额</view>
					<view class="amount">
						<view>当前余额 ￥ {{myInfo.money}}</view>
					</view>
				</view>
			</template>
			
			<template v-slot:content>
				<!--内容 start-->
				<view v-for="(item,index) in billList" :key="index" class="list-view">
					<view class="list-item" hover-class="hover" :hover-stay-time="150">
						<view class="content-box">
							<tui-icon v-if="item.in_out == 1" name="wealth-fill" :size="30" color="#ff5800" class="logo"></tui-icon>
							<tui-icon v-if="item.in_out == 2" name="wealth" :size="30" color="#19be6b" class="logo"></tui-icon>
							<view class="des-box">
								<view class="tit">{{item.name}}<tui-tag size="12px" shape="circle" style="margin-left:10px">{{item.apply_status_name}}</tui-tag></view>
								<view class="remark">申请说明: {{item.remark}}</view>
								<view class="time">申请时间: {{item.add_time}}</view>
								<view class="remark">处理说明: {{item.handle_remark}}</view>
							</view>
						</view>
						<view v-if="item.in_out == 1" class="money add">
							<view>+{{item.amount}}</view>
							<view v-if="item.status == 2"><tui-tag size="10px" padding="5px 10px"  type="light-green" shape="circle" class="tui-right">处理中</tui-tag></view>
						</view>
						<view v-if="item.in_out == 2" class="money del">
							<view>-{{item.amount}}</view>
							<view v-if="item.status == 2"><tui-tag size="10px" padding="5px 10px" type="light-green" shape="circle" class="tui-right">处理中</tui-tag></view>
						</view>
					</view>
				</view>
				<!--内容 end-->
			</template>
		</tui-sticky>
		
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" bgcolor="#f7f7f7"></tui-nomore>
		<!--加载loadding-->
		
	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiSticky from "@/components/thorui/tui-sticky/tui-sticky"
	import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore"
	import tuiNomore from "@/components/thorui/tui-nomore/tui-nomore"
	import tuiTag from "@/components/thorui/tui-tag/tui-tag"
	export default {
		components:{
			footerMenu,
			tuiIcon,
			tuiSticky,
			tuiLoadmore,
			tuiNomore,
			tuiTag
		},
		data() {
			return {
				scrollTop: 0,
				loadding: false,
				pullUpOn: true,
				
				myInfo: [],
				billList: [],
				pageIndex: 1,
				pageCount: 0,
				pageTotal: 0,
				
				//底部导航栏tabbar
				tabCur: 1,
				tabbar: [{icon: "home", text: "首页", size: 21}, 
					{icon: "people", text: "我的", size: 24}],
			}
		},
		methods: {
			
			//底部导航栏tabbar
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.tabCur = index;
				if (index == 0) {
					uni.switchTab({ url: '/pages/site/index' })
				} else {
					uni.switchTab({ url: '/pages/my/index' })
				}
			},
			
			getBillList: function(type) {
				if(type != 'append') this.pageIndex = 1;
				uni.request({
					url: this.$apiUrl + '/api/money/billList',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					data: {
						page_num: this.pageIndex,
						type: 103,
					},
					success: (res) => {
						let resData = res.data['data'];
						if(type == 'append') {		//底部分页加载更多
							this.billList = this.billList.concat(resData['list']);
						}else{
							this.billList = resData['list'];
						}
						this.pageCount = resData['pager']['page_total'];
						this.pageTotal = resData['pager']['count'];
					}
				});
			},
			
			//得到我的个人信息
			getMyBaseInfo: function(){
				uni.request({
					url: this.$apiUrl + '/api/user/baseInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					success: (res) => {
						let resData = res.data['data'];
						this.myInfo = resData;
					}
				});
			},
			
		},
		
		
		//页面滚动执行方式
		onPageScroll(e) {
		//	this.scrollTop= e.scrollTop
		},
		
		onLoad: function(options) {
			this.getBillList();
			this.getMyBaseInfo();
		},
		
		
		onPullDownRefresh: function() {
		},
		
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == this.pageCount) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.pageIndex = this.pageIndex + 1;
				this.getBillList('append');
				this.loadding = true;
				this.pullUpOn = true;
			}
		},
		
	}
</script>

<style>
	
	/*tabbar*/
	.tui-tabbar {width: 100%; position: fixed; display: flex;align-items: center;justify-content: space-between;z-index: 99999;background: #fff; height: 100rpx;left: 0;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}
	.tui-safearea-bottom {width: 100%;height: env(safe-area-inset-bottom);}
	.tui-tabbar::before {content: ''; width: 100%; border-top: 1rpx solid #d9d9d9;position: absolute;top: 0;left: 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.tui-tabbar-item {flex: 1;width: 25%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;font-size: 24rpx;color: #666;height: 80rpx;}
	.tui-ptop-4 {padding-top: 4rpx;}
	.tui-scale {font-weight: bold;transform: scale(0.8);transform-origin: center 100%;line-height: 30rpx;}
	.tui-item-active {color: #e41f19 !important;}
	/*tabbar*/
	
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tips {
		background: #fff;
		padding: 50rpx 34rpx;
		color: #555;
		font-size: 24rpx;
		line-height: 42rpx;
		position: relative;
	}

	.tips::before {
		content: '';
		position: absolute;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		right: 0;
		left: 0;
	}

	/* .sticky-container{
 position: relative;
} */
	/* sticky 容器 start */
	.sticky-item {
		width: 100%;
		height: 104rpx;
		padding: 20rpx 30rpx;
		background: #fafafa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	/* sticky 容器 end */

	.date {
		height: 54rpx;
		font-size: 28rpx;
		background: #fff;
		padding: 0 28rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		/* box-shadow: 0 0 1rpx #7A7A7A; */
	}

	.date::after {
		content: '';
		position: absolute;
		height: 200%;
		width: 200%;
		border: 1rpx solid #eaeef1;
		border-radius: 60rpx;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		left: 0;
		top: 0;
	}

	.amount {
		text-align: right;
		color: #7A7A7A;
		font-size: 24rpx;
	}

	.list-view {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.list-view::after {
		content: '';
		position: absolute;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		right: 0;
		left: 0;
	}

	.list-item {
		width: 100%;
		padding: 30rpx 28rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.list-item::after {
		left: 120rpx
	}

	.item-last::after {
		left: 0 !important
	}

	.content-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		flex-grow: 1
	}

	.des-box {
		min-height: 100rpx;
		padding-left: 28rpx;
		box-sizing: border-box;
		vertical-align: top;
		color: #333;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tit {
		font-size: 32rpx;
		max-width: 420rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.time {
		color: #888
	}

	.money {
		font-size: 38rpx;
		font-weight: 500;
		color: #000;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 20rpx;
	}

	.add {
		color: #ff5800 !important;
	}
	
	.del {
		color: #19be6b !important;
	}
	
	.remark {
		font-size: 24rpx;
		max-width: 420rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #999;
	}
</style>
